<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8"/>
        <title>
            键盘事件
        </title>
        <script type="text/javascript" src="../js/vue.js"></script>
    </head>
    <body>

        <div id="root">
            <input type="text" placeholder="按下回车提示输入" @keyup="showInfo"></input>
            <input type="text" placeholder="按下回车提示输入2" @keyup.enter="showInfo"></input>

            <!-- 支持组合配置, 例如:  @keyup.ctrl.y  表示: ctrl+y 才触发回调-->

        </div>
        <script type="text/javascript">
            Vue.config.Vue.config.keyCodes = {
                // camelCase won`t work, 自定义别名
                huiche: 13
            }
            const vm = new Vue({
                el: "#root",
                data:{
                    name: "王五"
                },
                methods: {
                    showInfo(e){
                        // if(e.keyCode !=13) return // 只有回车键才响应事件, vue提供了按键别名: enter, 特殊tab 必须使用keydown
                        console.log(e.target.value)
                    }
                },
            })
        </script>
    </body>
</html>